<template>
  <Demo v-if="isShowDemo"></Demo>
  <button @click="isShowDemo = !isShowDemo">显示\隐藏</button>
</template>

<script>
/* 
  1、父子组件挂载
  ---setup---
  ---beforeCreate---
  ---created---
  ---beforeMount---
  --Demo-setup---
  --Demo-beforeCreate---
  --Demo-created---
  --Demo-beforeMount---
  --Demo-mounted---
  ---mounted---
  生命周期顺序：父setup ---> 父beforeCreate ---> 父created ---> 父beforeMount ---> 子setup ---> 子beforeCreate --- 子created ---> 子beforeMount ---> 子mounted ---> 父mounted
    *****由于在vue3中setup == beforeCreate和created
    简化:父setup ---> 父beforeMount ---> 子setup ---> 子beforeMount ---> 子mounted ---> 父mounted
  意思：父页面先生成，然后生成子组件，子组件完全生成后，父页面才算完成

  2、子组件更新
  --Demo-beforeUpdate---
  --Demo-updated---
  生命周期顺序: 子beforeUpdate ---> 子updated

  3、子组件卸载
  ---beforeUpdate---
  --Demo-beforeUnmount---
  --Demo-unmounted---
  ---updated---
  生命周期顺序:父beforeUpdate ---> 子beforeUnmount ---> 子unmounted --->父updated
  意思：当卸载子组件时，其实是父组件在更新，所以先执行父组件beforeUpdate，然后开始卸载子组件，当子组件卸载完成后，父组件才算更新完

  4、组合式api中生命周期函数onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted
    ***注：无onBeforeCreate和onCreated  这两个等价于 setup()
    若同时写了配置项形式的生命周期函数和组合式api中的生命周期函数，则先执行组合式api中的生命周期函数
    --Demo-onBeforeMount---
    --Demo-beforeMount---
    --Demo-onMounted---
    --Demo-mounted---
*/

import { ref } from 'vue'
import Demo from './components/Demo'
export default {
  name: 'App',
  components: { Demo },
  setup() {
    console.log('---setup---')
    const isShowDemo = ref(true)

    return {
      isShowDemo,
    }
  },
  /* 
    1、在vue3中setup()  == beforeCreate() 和 created() 
       ***注:这两个函数写了也会执行，但会在setup()之后执行
    2、在vue3中已经不使用destroy，写了也不会执行
  */
  // beforeCreate() {
  //   console.log('---beforeCreate---')
  // },
  // created() {
  //   console.log('---created---')
  // },
  beforeMount() {
    console.log('---beforeMount---')
  },
  mounted() {
    console.log('---mounted---')
  },
  beforeUpdate() {
    console.log('---beforeUpdate---')
  },
  updated() {
    console.log('---updated---')
  },
  // beforeDestroy() {
  //   console.log('---beforeDestroy---')
  // },
  // destroyed() {
  //   console.log('---destroyed---')
  // },

  beforeUnmount() {
    console.log('---beforeUnmount---')
  },
  unmounted() {
    console.log('---unmounted---')
  },
}
</script>
